会议室预订系统：用户管理模块-用户端信息修改页面

用户相关的页面还剩下两个，这节我们来写一下：

首先是修改密码的页面，把注册页面的表单拿过来改改就行：

import { Button, Form, Input, message } from "antd";
import { useForm } from "antd/es/form/Form";
import "./update_password.css";
import { useCallback } from "react";
import { Link, useNavigate } from "react-router-dom";

export interface UpdatePassword {
    email: string;
    captcha: string;
    password: string;
    confirmPassword: string;
}

const layout1 = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
};

const layout2 = {
    labelCol: { span: 0 },
    wrapperCol: { span: 24 },
};

export function UpdatePassword() {
    const [form] = useForm();
    const navigate = useNavigate();

    const onFinish = useCallback(async (values: UpdatePassword) => {
        console.log(values);
    }, []);

    const sendCaptcha = useCallback(async function () {
        console.log("send captcha");
    }, []);

    return (
        <div id="updatePassword-container">
            <h1>会议室预订系统</h1>
            <Form
                form={form}
                {...layout1}
                onFinish={onFinish}
                colon={false}
                autoComplete="off">
                <Form.Item
                    label="邮箱"
                    name="email"
                    rules={[
                        { required: true, message: "请输入邮箱!" },
                        { type: "email", message: "请输入合法邮箱地址!" },
                    ]}>
                    <Input />
                </Form.Item>

                <div className="captcha-wrapper">
                    <Form.Item
                        label="验证码"
                        name="captcha"
                        rules={[{ required: true, message: "请输入验证码!" }]}>
                        <Input />
                    </Form.Item>
                    <Button type="primary" onClick={sendCaptcha}>
                        发送验证码
                    </Button>
                </div>

                <Form.Item
                    label="密码"
                    name="password"
                    rules={[{ required: true, message: "请输入密码!" }]}>
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    label="确认密码"
                    name="confirmPassword"
                    rules={[{ required: true, message: "请输入确认密码!" }]}>
                    <Input.Password />
                </Form.Item>

                <Form.Item {...layout1} label=" ">
                    <Button className="btn" type="primary" htmlType="submit">
                        修改
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}

css 部分如下：

#updatePassword-container {
    width: 400px;
    margin: 100px auto 0 auto;
    text-align: center;
}
#updatePassword-container .btn {
    width: 100%;
}
#updatePassword-container .captcha-wrapper {
    display: flex;
    justify-content: flex-end;
}

跑起来是这样的：

然后再调用下后端接口。

这时我发现一个问题：

之前写的 update_password 接口需要登录，然后用 @UserInfo 从 reqeust.user 取 userId。

但其实这个页面是从这里点进来的：

这时候并没有登录，只是通过邮箱验证身份，然后修改密码。

但是邮箱我们并没有添加唯一约束，只有 username 是在注册的时候做了唯一检查：

所以需要通过 username 来找到修改密码的用户。

可以改成前端传 username，然后后端验证过邮箱验证码之后，再根据 username 查询摇改密码的用户。

此外，我们在 User 的 entity 这里给 username 添加唯一约束：

然后可以看到 typeorm 确实给 username 添加了唯一索引：

在 mysql workbench 里也可以看到：

然后修改下 update_password 接口：

把 @RequireLogin、@ApiBearAuth 还有 @UsrInfo 去掉。

修改 UpdatePasswordDto，添加 username 属性：

@IsNotEmpty({
    message: '用户名不能为空'
})
@ApiProperty()
username: string;

然后改下 UserService 的 updatePassword 方法：

改成根据 username 查询用户，并且还要验证下邮箱是否正确。

const foundUser = await this.userRepository.findOneBy({
    username: passwordDto.username,
});

if (foundUser.email !== passwordDto.email) {
    throw new HttpException("邮箱不正确", HttpStatus.BAD_REQUEST);
}

还有，发送验证码接口的 @RequireLogin 和 @ApiBearerAuth 也要去掉：

测试下：

请求 /user/update_password/captcha 接口发送验证码：

然后请求 /user/update_password 接口：

提示修改密码成功。

我们在页面登录下试试：

用最新密码登录，提示登录成功。

postman 里跑通流程之后，我们在页面里加一下。

在更改密码页面加上 username 表单项：

<Form.Item
    label="用户名"
    name="username"
    rules={[{ required: true, message: "请输入用户名!" }]}>
    <Input />
</Form.Item>

类型中也加上 username：

然后在 interfaces.ts 添加这两个接口：

export async function updatePasswordCaptcha(email: string) {
    return await axiosInstance.get("/user/update_password/captcha", {
        params: {
            address: email,
        },
    });
}

export async function updatePassword(data: UpdatePassword) {
    return await axiosInstance.post("/user/update_password", data);
}

更改密码页面里调用下：

const sendCaptcha = useCallback(async function () {
    const address = form.getFieldValue("email");
    if (!address) {
        return message.error("请输入邮箱地址");
    }

    const res = await updatePasswordCaptcha(address);
    if (res.status === 201 || res.status === 200) {
        message.success(res.data.data);
    } else {
        message.error("系统繁忙，请稍后再试");
    }
}, []);

发送验证码接口的调用逻辑和注册时一模一样。

更改密码接口的调用逻辑也和注册差不多：

const onFinish = useCallback(async (values: UpdatePassword) => {
    if (values.password !== values.confirmPassword) {
        return message.error("两次密码不一致");
    }
    const res = await updatePassword(values);

    const { message: msg, data } = res.data;

    if (res.status === 201 || res.status === 200) {
        message.success("密码修改成功");
        setTimeout(() => {
            navigate("/login");
        }, 1500);
    } else {
        message.error(data || "系统繁忙，请稍后再试");
    }
}, []);

测试下：

填入邮箱，点击发送验证码。

提示发送成功。

邮箱里也收到了这个验证码。

然后填入新密码，点击修改密码按钮：

提示修改成功，然后会跳到登录页面：

在登录页面用新密码登录，提示登录成功。

这样，修改密码功能的前后端就都完成了。

然后还有一个更改个人信息的页面。

这个页面有所不同。

前面几个功能都是未登录时的，而这个修改个人信息的功能需要登录之后才能用。

而且界面上方是有公共的导航栏的。

所以这个页面要声明一个 /index 的路由作为父级路由，然后 /index/update_info 作为子路由。

添加一个 index/index.tsx 页面

import { UserOutlined } from "@ant-design/icons";
import { Outlet } from "react-router-dom";
import "./index.css";

export function Index() {
    return (
        <div id="index-container">
            <div className="header">
                <h1>会议室预定系统</h1>
                <UserOutlined className="icon" />
            </div>
            <div className="body">
                <Outlet></Outlet>
            </div>
        </div>
    );
}

这里用到了 antd 的 icon 组件，需要安装用到的包：

npm install @ant-design/icons --save

css 如下：

#index-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}
#index-container .header {
    height: 80px;
    border-bottom: 1px solid #aaa;
    line-height: 80px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}
#index-container h1 {
    margin: 0;
}

#index-container .icon {
    font-size: 40px;
    margin-top: 20px;
}
#index-container .body {
    flex: 1;
}

整体是竖直的 flex 布局，高度 100vh，上面 80px 下面 flex:1

然后 header 部分是水平的 flex 布局。

把它添加到 /index 的路由，并且添加两个子路由：

{
    path: "/",
    element: <Index></Index>,
    errorElement: <ErrorPage />,
    children: [
      {
        path: 'aaa',
        element: <div>aaa</div>
      },
      {
        path: 'bbb',
        element: <div>bbb</div>
      }
    ]
},

测试下：

没啥问题。

然后在下面添加 update_info 路由，并实现 page/update_info/UpdateInfo 组件：

import { Button, Form, Input, message } from "antd";
import { useForm } from "antd/es/form/Form";
import { useCallback } from "react";
import "./update_info.css";
import { useNavigate } from "react-router-dom";

export interface UserInfo {
    headPic: string;
    nickName: string;
    email: string;
    captcha: string;
}

const layout1 = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
};

export function UpdateInfo() {
    const [form] = useForm();
    const navigate = useNavigate();

    const onFinish = useCallback(async (values: UserInfo) => {}, []);

    const sendCaptcha = useCallback(async function () {}, []);

    return (
        <div id="updateInfo-container">
            <Form
                form={form}
                {...layout1}
                onFinish={onFinish}
                colon={false}
                autoComplete="off">
                <Form.Item
                    label="头像"
                    name="headPic"
                    rules={[{ required: true, message: "请输入头像!" }]}>
                    <Input />
                </Form.Item>

                <Form.Item
                    label="昵称"
                    name="nickName"
                    rules={[{ required: true, message: "请输入昵称!" }]}>
                    <Input />
                </Form.Item>

                <Form.Item
                    label="邮箱"
                    name="email"
                    rules={[
                        { required: true, message: "请输入邮箱!" },
                        { type: "email", message: "请输入合法邮箱地址!" },
                    ]}>
                    <Input />
                </Form.Item>

                <div className="captcha-wrapper">
                    <Form.Item
                        label="验证码"
                        name="captcha"
                        rules={[{ required: true, message: "请输入验证码!" }]}>
                        <Input />
                    </Form.Item>
                    <Button type="primary" onClick={sendCaptcha}>
                        发送验证码
                    </Button>
                </div>

                <Form.Item {...layout1} label=" ">
                    <Button className="btn" type="primary" htmlType="submit">
                        修改
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}

和前几个页面差不多。

css：

#updateInfo-container {
    width: 400px;
    margin: 50px auto 0 auto;
    text-align: center;
}
#updateInfo-container .btn {
    width: 100%;
}
#updateInfo-container .captcha-wrapper {
    display: flex;
    justify-content: flex-end;
}

访问 /update_info 可以看到这个页面：

这个页面涉及到 3 个接口：

/user/info 查询用户信息的接口，用来回显数据
/user/update 修改用户信息的接口，用来做修改
/user/update/captcha 发送验证码的接口

我们看下 swagger 接口文档：

/user/info 接口没有参数，但是需要登录：

/user/update 接口需要在 body 传这么几个参数：

/user/update/captcha 需要传一个邮箱地址：

不知道有没有同学发现这里有点不太合理：

邮箱是用户自己传的，那如果传的不是注册用的邮箱呢？

前面发送验证码需要传邮箱地址，是因为那是注册或者修改密码用，没有登录。

而现在已经登录了，就不应该再传邮箱地址了，应该是放在 jwt 里，然后在 LoginGuard 里取出来注入 controller。

我们改一下：

改一下这个 login 接口，在 jwt 里放 email 的信息：

同时 refresh 接口也要改下放在 jwt 里的信息：

这里要取 user.email，需要在 UserService 的 findUserById 方法里返回下 email：

然后在 LoginGuard 里从 jwt 里取出 email 来：

然后在 /user/update/captcha 就可以直接从 request.user 里拿 email 信息了：

把参数的标注去掉，其余的都不用变，这样就是从 jwt 里取登录用户的 email 来发邮件了。

我们测试下：

先登录：

然后用这个 accessToken 访问下发送验证码接口：

发送成功，收到了这个验证码：

然后调用下查询用户信息的接口：

之后调用修改接口：

在数据库里看下，用户信息已经改过来了：

postman 里接口的流程跑通之后，我们在页面调用下。

首先在 interfaces.ts 里添加这 3 个接口：

export async function getUserInfo() {
    return await axiosInstance.get("/user/info");
}

export async function updateInfo(data: UserInfo) {
    return await axiosInstance.post("/user/update", data);
}

export async function updateUserInfoCaptcha() {
    return await axiosInstance.get("/user/update/captcha");
}

然后我们先做用户信息的回显：

useEffect(() => {
    async function query() {
        const res = await getUserInfo();

        const { data } = res.data;

        if (res.status === 201 || res.status === 200) {
            console.log(data);
        }
    }
    query();
}, []);

调用 getUserInfo 接口，返回数据后打印下。

这个接口的访问需要登录，也就是要从 localStorage 里取出 accessToken 放到 header 里。

这种携带 header 的通用逻辑可以放在 axios 的 interceptor 里做。

并且还有 token 过期之后调用 refresh 刷新 token 的逻辑。

这个我们前面写过，直接拿过来放在 interfaces.ts 里：

import { message } from "antd";

const axiosInstance = axios.create({
    baseURL: "http://localhost:3005/",
    timeout: 3000,
});

axiosInstance.interceptors.request.use(function (config) {
    const accessToken = localStorage.getItem("access_token");

    if (accessToken) {
        config.headers.authorization = "Bearer " + accessToken;
    }
    return config;
});

interface PendingTask {
    config: AxiosRequestConfig;
    resolve: Function;
}
let refreshing = false;
const queue: PendingTask[] = [];

axiosInstance.interceptors.response.use(
    (response) => {
        return response;
    },
    async (error) => {
        if (!error.response) {
            return Promise.reject(error);
        }
        let { data, config } = error.response;

        if (refreshing) {
            return new Promise((resolve) => {
                queue.push({
                    config,
                    resolve,
                });
            });
        }

        if (data.code === 401 && !config.url.includes("/user/refresh")) {
            refreshing = true;

            const res = await refreshToken();

            refreshing = false;

            if (res.status === 200 || res.status === 201) {
                queue.forEach(({ config, resolve }) => {
                    resolve(axiosInstance(config));
                });

                return axiosInstance(config);
            } else {
                message.error(res.data);

                setTimeout(() => {
                    window.location.href = "/login";
                }, 1500);
            }
        } else {
            return error.response;
        }
    }
);

async function refreshToken() {
    const res = await axiosInstance.get("/user/refresh", {
        params: {
            refresh_token: localStorage.getItem("refresh_token"),
        },
    });
    localStorage.setItem("access_token", res.data.access_token || "");
    localStorage.setItem("refresh_token", res.data.refresh_token || "");
    return res;
}

这段逻辑就是在每次发请求之前，在 header 里加上 authorization，带上 access_token。

当响应码是 401 的时候，就刷新 token，刷新失败提示错误信息，然后跳到登录页。

并且通过 refreshing 的标记和 task 队列实现了并发请求只刷新一次。

这部分看不明白的同学建议回头看下 access_token 和 refresh_token 无感刷新那节。

其中，这代码代码可能有同学有疑问：

if (!error.response) {
    return Promise.reject(error);
}

是为了请求没有发送成功的情况的：

请求没有发送成功时，错误对象没有 response 属性。

接下来，我们先登录下：

给用户图标添加跳到 /update_info 的链接：

然后可以看到控制台打印了当前登录用户的信息：

然后我们做下回显：

form.setFieldValue("headPic", data.headPic);
form.setFieldValue("nickName", data.nickName);
form.setFieldValue("email", data.email);

这样，回显的数据就有了：

然后实现发送验证码：

const sendCaptcha = useCallback(async function () {
    const res = await updateUserInfoCaptcha();
    if (res.status === 201 || res.status === 200) {
        message.success(res.data.data);
    } else {
        message.error("系统繁忙，请稍后再试");
    }
}, []);

这里不需要填邮箱地址，服务端会从 jwt 里取。

那这里的邮箱也是不应该修改的，给它加个 disabled：

点击发送验证码。

提示发送成功，邮箱里也收到了这个验证码：

接下来就差更新接口了，我们调用下：

const onFinish = useCallback(async (values: UserInfo) => {
    const res = await updateInfo(values);

    if (res.status === 201 || res.status === 200) {
        const { message: msg, data } = res.data;
        if (msg === "success") {
            message.success("用户信息更新成功");
        } else {
            message.error(data);
        }
    } else {
        message.error("系统繁忙，请稍后再试");
    }
}, []);